<template>
  <div class="bg-white p10">
    <div class="level mb10">
      <div class="left">
        <el-button
            size="small"
            type="primary"
            @click="handleSave">新增</el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleBatchDelete">批量删除</el-button>

      </div>
      <div class="right">
      <el-input
          class="w200"
          size="small"
          placeholder="请选择日期"
          suffix-icon="el-icon-date"
          v-model="dataSource.input1">
      </el-input>
      <el-input
          size="small"
          class="w200 ml10"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="dataSource.input2">
      </el-input>
      </div>
    </div>
    <el-table
        size="mini"
        border
        :data="dataSource.users"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55"/>
      <el-table-column
          label="序号"
          type="index">
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column
       label="操作"
      >
        <template #default="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="收货地址" v-model="dataSource.dialogFormVisible"  width="30%" draggable>
      <el-form :model="dataSource.form">
        <el-form-item label="活动名称" >
          <el-input v-model="dataSource.form.name"  size="small" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" >
          <el-select v-model="dataSource.form.region"  size="small" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="dataSource.dialogFormVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="dataSource.dialogFormVisible = false" size="small">确 定</el-button>
    </span>
      </template>
    </el-dialog>

    <el-popover
        placement="top"
        :width="160"
        v-model:visible="dataSource.visible"
    >
      <p>这是一段内容这是一段内容确定删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
import {onMounted, reactive} from 'vue'
import {ElTable,ElTableColumn,ElButton,ElDialog,ElForm,ElFormItem,ElSelect,ElOption,ElInput,ElPopover} from 'element-plus'
export default {
  name: "Index",
  components:{
    ElTable,
    ElTableColumn,
    ElButton,
    ElDialog,
    ElForm,
    ElFormItem,
    ElSelect,
    ElOption,
    ElInput,
    ElPopover
  },
  setup(){
    const  dataSource = reactive({
        users: Array(10).fill({date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 栋"}),
        search:'',
        input1:'',
        input2:'',
        dialogFormVisible:false,
        visible:false,
        form:{
          name:'',
          region:'',
        }
    })
    const loadData = () =>{
    }
    const  handleEdit = (v,v1) =>{
      dataSource.dialogFormVisible = !dataSource.dialogFormVisible;
    }
    const  handleSave = ()  =>{
      dataSource.dialogFormVisible = !dataSource.dialogFormVisible;
    }
    const handleBatchDelete = ()=>{
      dataSource.visible = !dataSource.visible;
    }
    onMounted({
      loadData
    })
    return {
      dataSource,
      handleEdit,
      handleSave,
      handleBatchDelete
    }
  }
}
</script>

<style scoped>

</style>
